<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>number:{{number}}</h1>
        <button @click="number--">-1</button>
        <button @click="add">+1</button>

        <select v-model="number">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option v-if="number>0">{{number}}</option>
        </select>
        <img :src="['img/avatar'+(number%2+2)+'.png']"/>
        <br>
        <div v-if="number%2==0">
            <span>双</span>
        </div>
        <div v-if="number%2==1||number%2==-1">
            <span>单</span>
        </div>

        <div v-if="!user.username">
            <a href="www.baidu.com" @click.prevent="login">登录</a>
            <a href="#">注册</a>
        </div>
        <div v-if="user.username">
            <a href="#">{{user.username}}</a>
            <a href="#" @click.prevent="signout">退出</a>
        </div>
        <button @click="init">测试ajax</button>
    </div>
</body>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="vue/vue.js"></script>
<script src="vue/axios.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            number:0,
            user:{
                username:"aaa",
            }
        },
        methods:{
            add() {
                this.number++;
            },
            login(){
                this.user.username="张三";
            },
            signout(){
                this.user.username="";
            },
            init(){
                axios.get("http://localhost:8081/vue/init",{params:{username:app.user.username}}).then(function (info) {
                    console.log(info)
                    // app.user.username = info.data();
                })
            }
        },created:function () {
            // this.init();
        }
    })
</script>
</html>
